<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="index.css">    
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <script src="index.js"></script>    
</head>
<body>
<div data-role="page" id="productList">
    <div data-role="header">
        <h1>在线电商网站</h1>
    </div>
    <div data-role="main" class="ui-content">
        <div data-role="collapsible">
            <h1>产品分类</h1>
            <p><a href="product_list.html?category=1" data-ajax="false">笔记本</a></p>
            <p><a href="product_list.html?category=2" data-ajax="false">平板电脑</a></p>
            <p><a href="product_list.html?category=3" data-ajax="false">一体机</a></p>
            <p><a href="product_list.html?category=4" data-ajax="false">台式机</a></p>
            <p><a href="product_list.html?category=5" data-ajax="false">服务器</a></p>
        </div>        
        <h3 id="title"></h3>
        <div data-role="collapsible">
            <h1>筛选</h1>

            <br>

            <div class="row">    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                该分类全部产品排序方式<br><br>
              </div>
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="ordering" value="price">价格由低到高<br><br></a>
              </div>    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="ordering" value="-price">价格由高到低<br><br></a>
              </div>     
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="ordering" value="-sold">销量由大到小<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="ordering" value="sold">销量由小到大<br><br></a>
              </div>               
            </div>

            <br>

            <div class="row">    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                按品牌（销量由大到小）<br><br>
              </div>
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="1" ordering="-sold">戴尔<br><br></a>
              </div>    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="2" ordering="-sold">联想<br><br></a>
              </div>     
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="3" ordering="-sold">惠普<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="4" ordering="-sold">宏基<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="5" ordering="-sold">华硕<br><br></a>
              </div>              
            </div>

            <br>

            <div class="row">    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                按品牌（销量由小到大）<br><br>
              </div>
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="1" ordering="sold">戴尔<br><br></a>
              </div>    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="2" ordering="sold">联想<br><br></a>
              </div>     
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="3" ordering="sold">惠普<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="4" ordering="sold">宏基<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="5" ordering="sold">华硕<br><br></a>
              </div>              
            </div>

            <br>

            <div class="row">    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                按品牌（价格由低到高）<br><br>
              </div>
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="1" ordering="price">戴尔<br><br></a>
              </div>    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="2" ordering="price">联想<br><br></a>
              </div>     
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="3" ordering="price">惠普<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="4" ordering="price">宏基<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="5" ordering="price">华硕<br><br></a>
              </div>              
            </div>

            <br>

            <div class="row">    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                按品牌（价格由高到低）<br><br>
              </div>
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="1" ordering="-price">戴尔<br><br></a>
              </div>    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="2" ordering="-price">联想<br><br></a>
              </div>     
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="3" ordering="-price">惠普<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="4" ordering="-price">宏基<br><br></a>
              </div>  
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
                <a class="manufacturer" value="5" ordering="-price">华硕<br><br></a>
              </div>              
            </div>
        </div> 

        <div class="ui-grid-a" id="view">
        </div>

        <div data-role="navbar">
            <ul>
                <li><a data-icon="arrow-l" id="prev"></a></li>
                <li><a data-icon="arrow-r" id="next"></a></li>
            </ul>
        </div>

        <div style="text-align:center;">
            第<span id="page_no">1</span>页
        </div>


    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home" data-ajax="false"></a></li>
                <li><a href="usercenter.html" data-icon="user" data-ajax="false"></a></li>
            </ul>
        </div>
    </div>
</div> 
</body>
</html>